<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加宿管老师</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>

    <style>
        /*表单外框*/
        .rg_layout{
            width: 700px;
            height: 650px;
            border: 8px solid #cef6f8;/*边框 8个像素 实线 设置一个颜色*/
            background: #ffffff;/*背景为白色*/
            /*让这个div水平居中*/
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        /*表单项*/
        .td_left{
            width: 200px;
            height:30px;
            text-align: right;
            padding-top: 40px;
        }
        .td_right{
            width: 300px;
            height:30px;
            padding-left: 10px;
            padding-top: 40px;
        }

        /*注册按钮 居中*/
        .td_sub{
            padding-left: 300px;
            padding-top: 15px;
        }
        /*错误提示信息*/
        #hint{
            color: red;
            padding-left: 300px;
            padding-top: 20px;
        }
    </style>
    <script>
        //正则
        //账号
        function checkUsername() {
            var reg = /^\w{6,15}$/;
            var username = $("#username").val();
            return reg.test(username);
        }
        //密码
        function checkPassword() {
            var password = $("#password").val();
            var reg = /^\w{7,15}$/;
            return reg.test(password);
        }
        //确认密码
        function checkPassword1() {
            var password = $("#password1").val();
            var reg = /^\w{7,15}$/;
            return reg.test(password);
        }
        //姓名 2--4位中文
        function checkName() {
            var name = $("#name").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}$/
            return reg.test(name);
        }
        //手机号
        function checkPhone() {
            //获取用户输入数据
            var phone = $("#phone").val();
            //定义正则表达式  1开头 另外11个数字
            var reg = /^1\d{10,10}$/;
            //返回是否满足正则表达式
            return reg.test(phone);
        }
        //管理楼栋号
        function checkBuilding() {
            var building = $("#building").val();
            var reg = /^\d{1,3}$/;
            return reg.test(building);
        }

        //入口函数
        $(function () {
            //表单的提交
            $("#reg_teacher_form").submit(function () {
                if (checkUsername() && checkPassword() && checkPassword1() && checkName() && checkPhone() && checkBuilding()){
                    $.post("superAdmain/addTeacher",$("#reg_teacher_form").serialize(),function (data) {
                        if (data.flag){
                            alert("该宿管添加成功！");
                            location.reload();
                        }else{
                            $("#hint").html(data.errorMsg);
                        }
                    });
                    return false;
                }
            });


            //表单项的离焦事件
            //账号
            $("#username").blur(function () {
                if (checkUsername()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //密码
            $("#password").blur(function () {
                if (checkPassword()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            $("#password1").blur(function () {
                if (checkPassword1()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //姓名
            $("#name").blur(function () {
                if (checkName()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //手机号
            $("#phone").blur(function () {
                if (checkPhone()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
            //楼栋号
            $("#building").blur(function () {
                if (checkBuilding()){
                    //表示满足正则表达式
                    $(this).css("border","");
                }else{
                    //不满足正则表达式 加一个css样式
                    $(this).css("border","2px solid red");
                }
            });
        });

    </script>
</head>
<body>
<!-- 中间表单的外框 -->
<div class="rg_layout">
    <!-- 注册表单 -->
    <form id="reg_teacher_form">
        <table>
            <tr>
                <td class="td_left">
                    <label for="username">账号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="username" name="account" placeholder="请输入账号"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">密码</label>
                </td>
                <td class="td_right">
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="password">确认密码</label>
                </td>
                <td class="td_right">
                    <input type="password" class="form-control" id="password1" name="password1" placeholder="确认密码"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="name">姓名</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="name" name="tname" placeholder="请输入姓名"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label>性别</label>
                </td>
                <td class="td_right">
                    &nbsp;&nbsp;
                    <input type="radio" name="gender" value="男" checked>男
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" value="女">女
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="phone">手机号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号"/>
                </td>
            </tr>
            <tr>
                <td class="td_left">
                    <label for="building">管理楼栋号</label>
                </td>
                <td class="td_right">
                    <input type="text" class="form-control" id="building" name="building" placeholder="请输入管理楼栋号，直接输入数字即可"/>
                </td>
            </tr>
            <!-- 注册按钮 -->
            <tr>
                <td colspan="2" class="td_sub" ><input class="btn btn-info" type="submit" id="btn_sub" value="确定"></td>
            </tr>
        </table>
    </form>
    <!-- 注册失败错误提示信息 -->
    <div id="hint"></div>
</div>
<div style="float: right;margin-right: 150px">
    <a href="admain_main_page.html" class="btn btn-info">返回主界面</a>
</div>
</body>
</html>